const colors = require('tailwindcss/colors')

module.exports = {
  // purge: [],
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    /** 结构重置部分默认值,也可随后新增
    backgroundColor: theme => ({
      ...theme('colors'),
      'primary': '#3490dc',
      'secondary': '#ffed4a',
      'danger': '#e3342f',
      ...
     }),
    */
    // 拓展
    extend: {
      'light-blue': colors.lightBlue,
      cyan: colors.cyan,
      flex: {
        '0': '0 0 100%',
        '1/3': '0 0 33.333333%',
        '2/3': '0 0 66.666667%',
      },
      screens: {
        'xs': '576px',
        // 'sm': '640px',
        // 'md': '768px',
        'fo992': '992px',
        // 'lg': '1024px',
        // 'xl': '1280px',
        // '2xl': '1536px',
      },
      zIndex: {
        '1': '1',
        '200': '200',
        '300': '300',
        '9999': '9999',
      },
      margin: {
        '1.25': '0.3125rem',// 5
      },
      padding: {
        '1.25': '5px',
        '10vh': '10vh',
        '12vh': '12vh',
      },
      lineHeight: {
        'initial': 'initial',
        '5.5': '1.375rem',// 22
        '11': '2.75rem',// 44
        // 3.125rem=50px
        '14.5': '3.75rem',// 58px
      },
      textColor: {
        'gitlab': '#d1d1f0',
        'muted': '#707070'// #969faf
      },
      width: {
        '2.75': '11px',// 11px
        '4.5': '1.125rem',// 18px
        '7.5': '1.875rem',// 30px
      },
      height: {
        '2.75': '11px',
        '4.5': '1.125rem',
        '7.5': '1.875rem',
      },
      backgroundColor: {
        'gitlab': '#292961',
        'gitlab-hover': 'rgba(209, 209, 240, 0.2)',
        'blue-algolia': '#06b6d4'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms')
  ],
}
